<template>
  <div>
    <div class="top">
      <div class="topleft">
        <h1>猫眼电影</h1>
      </div>
      <div class="topright">
        <span>
          <svg t="1675308255124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32482" width="20" height="20" > 
            <path d="M892.928 128q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-759.808 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.64t48.64-19.968l759.808 0zM892.928 448.512q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-759.808 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.64t48.64-19.968l759.808 0zM892.928 769.024q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-759.808 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.64t48.64-19.968l759.808 0z" p-id="32483" fill="#e6e6e6" ></path>
          </svg>
        </span>
      </div>
    </div>
    <!-- <ul>
      <li v-for="item in littlemv" :key="item.id" :item="item">
      <img :src="item.shareInfo.img" alt="">
      </li>
    </ul> -->
    <div class="box" >
      <littlevideo v-for="item in littlemv" :key="item.id" :item="item" @click="clickHandler(item.id)"><a :href="'https://i.maoyan.com/asgard/live/index?id='+item.id"></a></littlevideo>
    </div>
  </div>
</template>

<script setup>
import littlevideo from "@/components/littlevideo.vue";

import { storeToRefs } from "pinia";
import { useHotStore } from "@/stores/hot.js";

const store = useHotStore();
const { littlemv } = storeToRefs(store);
const {  updateLittlemv } = store;

console.log('littlemv', littlemv);

updateLittlemv();

const clickHandler = (you) => {
  console.log(you);
};

</script>

<style lang="scss" scoped>
.top {
  width: 100vw;
  height: 8vh;
  color: #ddd;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  background-color: #e54847;
  overflow: auto;
  .topleft {
    width: 100vw;
    font-size: 20rem;
    line-height: 8vh;
    display: flex;
    justify-content: center;
  }
  .topright {
    display: flex;
    align-items: center;
    margin-right: 10rem;
  }
}
.box{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>
